<template>
  <view class="activities-page">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <view class="back-button" @click="navigateBack">
        <uni-icon type="left" size="24" color="#333" />
      </view>
      <view class="page-title">活动记录</view>
      <view class="right-space"></view>
    </view>

    <!-- 活动类型筛选 -->
    <view class="activity-filters">
      <scroll-view scroll-x enable-flex show-scrollbar="false">
        <view class="filter-scroll">
          <view 
            class="filter-tag" 
            :class="{ active: selectedType === 'all' }"
            @click="selectedType = 'all'"
          >
            全部
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: selectedType === 'study' }"
            @click="selectedType = 'study'"
          >
            <uni-icon type="chatbubble-ellipses" size="14" /> 学习
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: selectedType === 'test' }"
            @click="selectedType = 'test'"
          >
            <uni-icon type="checkmark-circle" size="14" /> 测试
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: selectedType === 'achievement' }"
            @click="selectedType = 'achievement'"
          >
            <uni-icon type="trophy" size="14" /> 成就
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: selectedType === 'streak' }"
            @click="selectedType = 'streak'"
          >
            <uni-icon type="flame" size="14" /> 连续
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: selectedType === 'system' }"
            @click="selectedType = 'system'"
          >
            <uni-icon type="notifications" size="14" /> 系统
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 日期筛选器 -->
    <view class="date-filter">
      <picker 
        mode="date" 
        :start="startDate" 
        :end="endDate" 
        :value="selectedDate" 
        @change="handleDateChange"
        class="date-picker"
      >
        <view class="picker-text">
          <uni-icon type="calendar" size="16" color="#666" />
          <span>{{ formatDisplayDate(selectedDate) }}</span>
          <uni-icon type="down" size="16" color="#666" />
        </view>
      </picker>
      
      <view class="date-range-buttons">
        <view 
          class="range-button" 
          :class="{ active: selectedRange === 'week' }"
          @click="selectedRange = 'week'"
        >
          近7天
        </view>
        <view 
          class="range-button" 
          :class="{ active: selectedRange === 'month' }"
          @click="selectedRange = 'month'"
        >
          近30天
        </view>
        <view 
          class="range-button" 
          :class="{ active: selectedRange === 'custom' }"
          @click="showCustomRange = true"
        >
          自定义
        </view>
      </view>
    </view>

    <!-- 自定义日期范围弹窗 -->
    <uni-popup v-model="showCustomRange" mode="bottom" :animation="false">
      <view class="custom-range-popup">
        <view class="popup-header">
          <view class="popup-title">选择日期范围</view>
          <view class="popup-close" @click="showCustomRange = false">
            <uni-icon type="close" size="20" color="#666" />
          </view>
        </view>
        
        <view class="date-range-pickers">
          <view class="date-picker-item">
            <view class="picker-label">开始日期</view>
            <picker 
              mode="date" 
              :start="startDate" 
              :end="endDate" 
              :value="customStartDate" 
              @change="e => customStartDate = e.detail.value"
            >
              <view class="picker-display">{{ formatDisplayDate(customStartDate) }}</view>
            </picker>
          </view>
          
          <view class="date-picker-item">
            <view class="picker-label">结束日期</view>
            <picker 
              mode="date" 
              :start="startDate" 
              :end="endDate" 
              :value="customEndDate" 
              @change="e => customEndDate = e.detail.value"
            >
              <view class="picker-display">{{ formatDisplayDate(customEndDate) }}</view>
            </picker>
          </view>
        </view>
        
        <view class="popup-actions">
          <button type="default" size="mini" @click="showCustomRange = false" class="cancel-button">
            取消
          </button>
          <button type="primary" size="mini" @click="applyCustomRange" class="confirm-button">
            确定
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 活动内容区 -->
    <view class="activities-content">
      <!-- 加载中 -->
      <view v-if="isLoading" class="loading-container">
        <uni-loading type="circle" color="#2196F3" />
        <view class="loading-text">加载中...</view>
      </view>
      
      <!-- 无数据 -->
      <view v-else-if="filteredActivities.length === 0" class="empty-container">
        <uni-icon type="document-text" size="64" color="#e0e0e0" />
        <view class="empty-text">暂无活动记录</view>
        <view class="empty-subtitle">开始你的学习之旅吧！</view>
      </view>
      
      <!-- 活动列表 -->
      <view v-else class="activities-list">
        <!-- 按日期分组显示 -->
        <template v-for="(group, date) in groupedActivities" :key="date">
          <view class="date-header">
            <view class="date-text">{{ formatGroupDate(date) }}</view>
            <view class="date-divider"></view>
          </view>
          
          <view 
            class="activity-item" 
            v-for="(activity, index) in group" 
            :key="activity.id || index"
            :class="`activity-type-${activity.type}`"
          >
            <!-- 时间线 -->
            <view class="timeline">
              <view class="timeline-dot" :style="{ backgroundColor: getActivityColor(activity.type) }"></view>
              <view class="timeline-line" v-if="index < group.length - 1"></view>
            </view>
            
            <!-- 活动内容 -->
            <view class="activity-main">
              <view class="activity-header">
                <view class="activity-title">
                  <uni-icon 
                    :type="getActivityIcon(activity.type)" 
                    size="16" 
                    :color="getActivityColor(activity.type)" 
                    class="activity-icon"
                  />
                  <span>{{ activity.title }}</span>
                </view>
                <view class="activity-time">{{ formatTime(activity.time) }}</view>
              </view>
              
              <view class="activity-description">
                {{ activity.description || getDefaultDescription(activity.type) }}
              </view>
              
              <!-- 活动详情（如果有） -->
              <view v-if="activity.details && Object.keys(activity.details).length > 0" class="activity-details">
                <view class="detail-item" v-for="(value, key) in activity.details" :key="key">
                  <view class="detail-label">{{ formatDetailKey(key) }}:</view>
                  <view class="detail-value">{{ formatDetailValue(key, value) }}</view>
                </view>
              </view>
              
              <!-- 成就徽章（如果是成就类型） -->
              <view v-if="activity.type === 'achievement' && activity.badge" class="achievement-badge">
                <view class="badge-icon" :style="{ backgroundColor: getActivityColor('achievement') }">
                  <uni-icon :type="activity.badge.icon || 'star'" size="18" color="#fff" />
                </view>
                <view class="badge-name">{{ activity.badge.name || '新成就' }}</view>
                <uni-icon type="chevron-right" size="14" color="#999" />
              </view>
            </view>
          </view>
        </template>
        
        <!-- 加载更多 -->
        <view v-if="hasMore" class="load-more" @click="loadMoreActivities">
          <view class="load-more-text">加载更多</view>
          <uni-icon type="spinner" size="14" color="#666" class="load-more-icon" :animation="spinAnimation" />
        </view>
      </view>
    </view>

    <!-- 数据统计摘要 -->
    <view class="stats-summary" v-if="filteredActivities.length > 0">
      <view class="summary-item" v-for="(stat, index) in summaryStats" :key="index">
        <view class="summary-value">{{ stat.value }}</view>
        <view class="summary-label">{{ stat.label }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { statisticsApi } from '../../api/statistics';
import { dataCache } from '../../utils/dataCache';
import { ChartUtils } from '../../components/statistics/ChartComponents';

const router = useRouter();

// 响应式数据
const isLoading = ref(false);
const activities = ref([]);
const selectedType = ref('all');
const selectedDate = ref('');
const selectedRange = ref('week');
const showCustomRange = ref(false);
const customStartDate = ref('');
const customEndDate = ref('');
const currentPage = ref(1);
const pageSize = ref(20);
const hasMore = ref(true);
const spinAnimation = ref({});

// 日期范围限制
const startDate = computed(() => {
  const date = new Date();
  date.setFullYear(date.getFullYear() - 1);
  return ChartUtils.formatDate(date, 'YYYY-MM-DD');
});

const endDate = computed(() => {
  return ChartUtils.formatDate(new Date(), 'YYYY-MM-DD');
});

// 初始化
onMounted(() => {
  // 设置默认日期为今天
  selectedDate.value = endDate.value;
  customStartDate.value = ChartUtils.formatDate(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), 'YYYY-MM-DD');
  customEndDate.value = endDate.value;
  
  // 开始动画
  startSpinAnimation();
  
  // 加载数据
  loadActivities();
  
  // 监听筛选条件变化
  selectedType.value = 'all';
  selectedRange.value = 'week';
});

// 清理
onUnmounted(() => {
  stopSpinAnimation();
});

// 开始旋转动画
function startSpinAnimation() {
  let deg = 0;
  const rotate = () => {
    deg += 10;
    spinAnimation.value = { transform: `rotate(${deg}deg)` };
    requestAnimationFrame(rotate);
  };
  rotate();
}

// 停止旋转动画
function stopSpinAnimation() {
  spinAnimation.value = {};
}

// 加载活动数据
async function loadActivities(reset = true) {
  if (isLoading.value) return;
  
  isLoading.value = true;
  try {
    // 构建查询参数
    const params = {
      type: selectedType.value === 'all' ? undefined : selectedType.value,
      page: reset ? 1 : currentPage.value,
      pageSize: pageSize.value
    };
    
    // 根据选择的日期范围设置时间参数
    if (selectedRange.value === 'week') {
      params.startTime = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString();
      params.endTime = new Date().toISOString();
    } else if (selectedRange.value === 'month') {
      params.startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString();
      params.endTime = new Date().toISOString();
    } else if (selectedRange.value === 'custom') {
      params.startTime = new Date(customStartDate.value).toISOString();
      params.endTime = new Date(customEndDate.value + ' 23:59:59').toISOString();
    }
    
    // 尝试从缓存获取数据
    const cacheKey = `activities_${JSON.stringify(params)}`;
    const cachedData = await dataCache.get(cacheKey);
    
    if (cachedData) {
      processActivitiesData(cachedData, reset);
    } else {
      // 调用API获取数据
      const response = await statisticsApi.getActivityHistory(params);
      
      // 缓存数据（10分钟有效期）
      await dataCache.set(cacheKey, response, 600);
      
      processActivitiesData(response, reset);
    }
  } catch (error) {
    console.error('加载活动数据失败:', error);
    // 使用模拟数据
    loadMockActivities(reset);
  } finally {
    isLoading.value = false;
  }
}

// 处理活动数据
function processActivitiesData(data, reset) {
  if (reset) {
    activities.value = data.items || [];
    currentPage.value = 1;
    hasMore.value = activities.value.length < (data.total || 0);
  } else {
    activities.value = [...activities.value, ...(data.items || [])];
    hasMore.value = activities.value.length < (data.total || 0);
  }
}

// 加载模拟数据
function loadMockActivities(reset) {
  const mockData = generateMockActivities(reset ? 1 : currentPage.value);
  processActivitiesData(mockData, reset);
}

// 生成模拟活动数据
function generateMockActivities(page) {
  const items = [];
  const types = ['study', 'test', 'achievement', 'streak', 'system'];
  const now = new Date();
  
  // 生成当前页的数据
  for (let i = 0; i < pageSize.value; i++) {
    const index = (page - 1) * pageSize.value + i;
    const type = types[index % types.length];
    const date = new Date(now.getTime() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000);
    date.setHours(Math.floor(Math.random() * 24));
    date.setMinutes(Math.floor(Math.random() * 60));
    
    let activity = {
      id: `mock-${index}`,
      type: type,
      time: date,
      title: '',
      description: '',
      details: {}
    };
    
    // 根据类型设置不同的内容
    switch (type) {
      case 'study':
        activity.title = '完成单词学习';
        activity.description = `学习了 ${Math.floor(Math.random() * 50) + 10} 个新单词`;
        activity.details = {
          wordsLearned: Math.floor(Math.random() * 50) + 10,
          duration: Math.floor(Math.random() * 30) + 5,
          accuracy: Math.floor(Math.random() * 40) + 60
        };
        break;
      case 'test':
        activity.title = '完成单词测试';
        activity.description = `测试成绩: ${Math.floor(Math.random() * 40) + 60} 分`;
        activity.details = {
          score: Math.floor(Math.random() * 40) + 60,
          totalQuestions: 20,
          correctAnswers: Math.floor(Math.random() * 10) + 10
        };
        break;
      case 'achievement':
        activity.title = '解锁新成就';
        activity.description = ['学习达人', '坚持之星', '记忆大师', '词汇王者'][index % 4];
        activity.badge = {
          name: activity.description,
          icon: ['star', 'trophy', 'medal', 'ribbon'][index % 4]
        };
        break;
      case 'streak':
        activity.title = '连续学习';
        activity.description = `连续学习 ${Math.floor(Math.random() * 20) + 1} 天`;
        activity.details = {
          streakDays: Math.floor(Math.random() * 20) + 1,
          totalMinutes: Math.floor(Math.random() * 300) + 50
        };
        break;
      case 'system':
        activity.title = '系统通知';
        activity.description = ['新功能上线', '学习计划更新', '活动提醒', '版本更新'][index % 4];
        break;
    }
    
    items.push(activity);
  }
  
  // 按时间倒序排序
  items.sort((a, b) => new Date(b.time) - new Date(a.time));
  
  return {
    items: items,
    total: 100, // 模拟总数据量
    page: page,
    pageSize: pageSize.value
  };
}

// 加载更多
async function loadMoreActivities() {
  if (!hasMore.value || isLoading.value) return;
  
  currentPage.value++;
  await loadActivities(false);
}

// 处理日期变化
function handleDateChange(e) {
  selectedDate.value = e.detail.value;
  selectedRange.value = 'day';
  loadActivities();
}

// 应用自定义日期范围
function applyCustomRange() {
  if (new Date(customStartDate.value) > new Date(customEndDate.value)) {
    uni.showToast({
      title: '开始日期不能晚于结束日期',
      icon: 'none'
    });
    return;
  }
  
  selectedRange.value = 'custom';
  showCustomRange.value = false;
  loadActivities();
}

// 计算属性：筛选后的活动
const filteredActivities = computed(() => {
  let result = [...activities.value];
  
  // 按类型筛选
  if (selectedType.value !== 'all') {
    result = result.filter(activity => activity.type === selectedType.value);
  }
  
  // 按日期筛选
  if (selectedRange.value === 'day') {
    const targetDate = new Date(selectedDate.value);
    targetDate.setHours(0, 0, 0, 0);
    const nextDay = new Date(targetDate);
    nextDay.setDate(nextDay.getDate() + 1);
    
    result = result.filter(activity => {
      const activityDate = new Date(activity.time);
      return activityDate >= targetDate && activityDate < nextDay;
    });
  }
  
  return result;
});

// 计算属性：按日期分组的活动
const groupedActivities = computed(() => {
  const groups = {};
  
  filteredActivities.value.forEach(activity => {
    const date = new Date(activity.time).toISOString().split('T')[0];
    if (!groups[date]) {
      groups[date] = [];
    }
    groups[date].push(activity);
  });
  
  // 按日期降序排序
  const sortedGroups = {};
  Object.keys(groups).sort((a, b) => new Date(b) - new Date(a)).forEach(date => {
    sortedGroups[date] = groups[date];
    // 按时间降序排序
    sortedGroups[date].sort((a, b) => new Date(b.time) - new Date(a.time));
  });
  
  return sortedGroups;
});

// 计算属性：摘要统计
const summaryStats = computed(() => {
  const stats = {
    total: filteredActivities.value.length,
    study: filteredActivities.value.filter(a => a.type === 'study').length,
    test: filteredActivities.value.filter(a => a.type === 'test').length,
    achievement: filteredActivities.value.filter(a => a.type === 'achievement').length
  };
  
  return [
    { label: '总活动', value: stats.total },
    { label: '学习', value: stats.study },
    { label: '测试', value: stats.test },
    { label: '成就', value: stats.achievement }
  ];
});

// 获取活动颜色
function getActivityColor(type) {
  const colorMap = {
    study: '#2196F3',
    test: '#4CAF50',
    achievement: '#FF9800',
    streak: '#9C27B0',
    system: '#757575'
  };
  return colorMap[type] || '#3F51B5';
}

// 获取活动图标
function getActivityIcon(type) {
  const iconMap = {
    study: 'chatbubble-ellipses',
    test: 'checkmark-circle',
    achievement: 'trophy',
    streak: 'flame',
    system: 'notifications'
  };
  return iconMap[type] || 'ellipse';
}

// 获取默认描述
function getDefaultDescription(type) {
  const descMap = {
    study: '完成了一次单词学习',
    test: '参加了单词测试',
    achievement: '解锁了新成就',
    streak: '保持学习连续天数',
    system: '系统通知'
  };
  return descMap[type] || '';
}

// 格式化显示日期
function formatDisplayDate(dateString) {
  return ChartUtils.formatDate(dateString, 'YYYY年MM月DD日');
}

// 格式化分组日期
function formatGroupDate(dateString) {
  const date = new Date(dateString);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);
  const dateOnly = new Date(date);
  dateOnly.setHours(0, 0, 0, 0);
  
  if (dateOnly.getTime() === today.getTime()) {
    return '今天';
  } else if (dateOnly.getTime() === yesterday.getTime()) {
    return '昨天';
  } else {
    return ChartUtils.formatDate(date, 'MM月DD日');
  }
}

// 格式化时间
function formatTime(date) {
  return ChartUtils.formatDate(date, 'HH:mm');
}

// 格式化详情键名
function formatDetailKey(key) {
  const keyMap = {
    wordsLearned: '学习单词数',
    duration: '学习时长(分钟)',
    accuracy: '正确率(%)',
    score: '得分',
    totalQuestions: '总题目数',
    correctAnswers: '正确题数',
    streakDays: '连续天数',
    totalMinutes: '总学习时长(分钟)'
  };
  return keyMap[key] || key;
}

// 格式化详情值
function formatDetailValue(key, value) {
  if (key === 'accuracy') {
    return `${value}%`;
  } else if (typeof value === 'number') {
    return ChartUtils.formatNumber(value);
  }
  return value;
}

// 导航返回
function navigateBack() {
  router.back();
}
</script>

<style scoped>
.activities-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 顶部导航栏 */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.back-button,
.right-space {
  width: 24px;
}

/* 活动类型筛选 */
.activity-filters {
  background-color: #fff;
  padding: 12px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 50px;
  z-index: 90;
}

.filter-scroll {
  display: flex;
  gap: 8px;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: #f5f7fa;
  border-radius: 16px;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  transition: all 0.3s;
}

.filter-tag.active {
  background-color: #2196F3;
  color: #fff;
}

/* 日期筛选器 */
.date-filter {
  background-color: #fff;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.date-picker {
  margin-bottom: 12px;
}

.picker-text {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
}

.date-range-buttons {
  display: flex;
  gap: 8px;
}

.range-button {
  flex: 1;
  padding: 8px 12px;
  text-align: center;
  background-color: #f5f7fa;
  border-radius: 6px;
  font-size: 13px;
  color: #666;
  transition: all 0.3s;
}

.range-button.active {
  background-color: #2196F3;
  color: #fff;
}

/* 自定义日期范围弹窗 */
.custom-range-popup {
  padding: 16px;
  background-color: #fff;
  border-radius: 12px 12px 0 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.popup-close {
  padding: 4px;
}

.date-range-pickers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.date-picker-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picker-label {
  font-size: 14px;
  color: #666;
}

.picker-display {
  padding: 10px 12px;
  background-color: #f5f7fa;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
}

.popup-actions {
  display: flex;
  gap: 12px;
}

.cancel-button,
.confirm-button {
  flex: 1;
  margin: 0;
}

/* 活动内容区 */
.activities-content {
  padding-bottom: 80px; /* 为底部统计预留空间 */
}

/* 加载中 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  gap: 12px;
}

.loading-text {
  font-size: 14px;
  color: #666;
}

/* 无数据 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  gap: 12px;
}

.empty-text {
  font-size: 16px;
  color: #999;
  font-weight: 500;
}

.empty-subtitle {
  font-size: 14px;
  color: #bbb;
}

/* 活动列表 */
.activities-list {
  padding: 0 16px;
}

/* 日期分组标题 */
.date-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 8px;
}

.date-text {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.date-divider {
  flex: 1;
  height: 1px;
  background-color: #e0e0e0;
}

/* 活动项 */
.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}

/* 时间线 */
.timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  position: relative;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 1;
  background-color: #e0e0e0;
}

.timeline-line {
  flex: 1;
  width: 1px;
  background-color: #e0e0e0;
  margin-top: 4px;
}

/* 活动主体内容 */
.activity-main {
  flex: 1;
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.activity-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.activity-icon {
  opacity: 0.8;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

.activity-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 活动详情 */
.activity-details {
  background-color: #f9f9f9;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 4px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #888;
}

.detail-value {
  font-weight: 500;
  color: #333;
}

/* 成就徽章 */
.achievement-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #FFF8E1;
  border-radius: 6px;
  border-left: 3px solid #FF9800;
}

.badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #E65100;
}

/* 加载更多 */
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  margin: 16px 0;
  background-color: #fff;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  transition: all 0.3s;
}

.load-more:active {
  background-color: #f5f7fa;
}

.load-more-icon {
  transition: transform 0.1s linear;
}

/* 数据统计摘要 */
.stats-summary {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 95;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.summary-label {
  font-size: 12px;
  color: #666;
}

/* 活动类型特定样式 */
.activity-type-study .activity-main {
  border-left: 3px solid #2196F3;
}

.activity-type-test .activity-main {
  border-left: 3px solid #4CAF50;
}

.activity-type-achievement .activity-main {
  border-left: 3px solid #FF9800;
}

.activity-type-streak .activity-main {
  border-left: 3px solid #9C27B0;
}

.activity-type-system .activity-main {
  border-left: 3px solid #757575;
}

/* 响应式调整 */
@media (max-width: 320px) {
  .activity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .activity-time {
    align-self: flex-end;
  }
  
  .summary-value {
    font-size: 16px;
  }
}
</style>